<template>
  <div style="display: inline-block;">
    <el-select
      @visible-change="visibleChangeStreet"
      @change="changeStreet"
      v-model="query.streetId"
      placeholder="请选择街道"
      class="handle-select mr10 mb10"
      v-if="showStreet"
      clearable
    >
      <el-option
        v-for="(item, index) in streetList"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select
      v-if="showCommunity"
      @visible-change="visibleChangeCommunity"
      @change="changeCommunity"
      v-model="query.communityId"
      placeholder="请选择社区"
      class="handle-select mr10 mb10"
      clearable
    >
      <el-option
        v-for="(item, index) in communityList"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-select
      v-if="showVillage"
      @visible-change="visibleChangeVillage"
      @change="changeVillage"
      v-model="query.villageId || query.villageName"
      placeholder="请选择小区"
      class="handle-select mr10 mb10"
      :filterable="showInput"
      :filter-method="handleKeyword"
    >
      <el-option
        v-for="(item, index) in villageList"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-input
      v-if="show"
      v-model="query.buildingNum"
      placeholder="搂栋号"
      class="handle-input mr10 mb10"
      @keyup.native.enter="handleSearch()"
    ></el-input>

    <el-input
      v-if="show"
      v-model="query.unitNum"
      placeholder="单元号"
      class="handle-input mr10 mb10"
      @keyup.native.enter="handleSearch()"
    ></el-input>

    <el-input
      v-if="show"
      v-model="query.houseNum"
      placeholder="门牌号"
      class="handle-input mr10 mb10"
      @keyup.native.enter="handleSearch()"
    ></el-input>
  </div>
</template>
<script>
export default {
  // props: ["query", "streetList", "communityList", "villageList"],
  props: {
    showVillage: {
      type: Boolean,
      default: true,
    },
    showStreet: {
      type: Boolean,
      default: true,
    },
    showCommunity: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Boolean,
      default: true,
    },
    showInput: {
      type: Boolean,
      default: true,
    },
    query: {
      type: Object,
      default: () => {
        return {};
      },
    },
    streetList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    communityList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    villageList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    handleSearch() {
      this.$emit("search");
    },
    handleKeyword(keyword) {
      console.log(keyword);
      this.query.villageName = keyword;
    },
    visibleChangeStreet(bool) {
      this.$emit("visibleChangeStreet", bool);
    },
    changeStreet(currentStreet) {
      this.$emit("changeStreet", currentStreet);
    },
    visibleChangeCommunity(bool) {
      this.$emit("visibleChangeCommunity", bool);
    },
    changeCommunity(currentCommunity) {
      this.$emit("changeCommunity", currentCommunity);
    },
    visibleChangeVillage(bool) {
      this.$emit("visibleChangeVillage", bool);
    },
    changeVillage(currentVillage) {
      this.$emit("changeVillage", currentVillage);
    },
  },
  watch: {
    "query.streetId"(newID, oldID) {
      if (newID == "") {
        this.query.communityId = "";
        this.query.communityName = "";
      }
    },
    "query.communityId"(newID, oldID) {
      if (newID == "") {
        this.query.villageId = "";
        this.query.villageName = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: auto;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
